<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../mui/css/mui.indexedlist.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<style type="text/css">
			.mui-bar {
				height: 6.4rem;
				display: flex;
				align-items: center;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 0;
			}
			
			.hotel-header {
				font-size: 1.4rem;
				color: #333;
			}
			
			.mui-indexed-list {
				width: 100%;
				border-radius: 0.5rem;
				border: none;
				margin-left: 1.8rem;
				/*background: #fff;*/
			}
			
			.mui-indexed-list-search {
				border: none;
			}
			
			.mui-bar input[type=search] {
				margin: 0;
			}
			
			.mui-bar .mui-icon {
				padding: 0;
			}
			
			.mui-search .mui-placeholder {
				height: 3rem;
				font-size: 1rem;
				line-height: 3rem;
			}
			
			.mui-search .mui-placeholder .mui-icon {
				font-size: 1.6rem;
				margin: 0;
			}
			
			.mui-bar .mui-input-row .mui-input-clear~.mui-icon-clear {
				top: 0.4rem;
			}
			
			.mui-bar-nav.mui-bar .mui-icon {
				padding-right: 0.5rem;
				padding-left: 0.5rem;
			}
			
			.category .head {
				display: flex;
				align-items: center;
				font-size: 0;
				padding: 0.9rem 1.2rem;
				margin: 0;
			}
			
			.head span {
				font-size: 1.2rem;
				color: #999;
				padding-left: 0.9rem;
			}
			
			.category:last-child .option {
				margin-bottom: 1.5rem;
			}
			
			.option {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				min-height: 7.3rem;
				overflow: hidden;
				padding: 1.5rem 1.5rem 0;
				margin: 0 1.2rem;
				background-color: #fff;
				border-radius: 0.4rem;
			}
			
			.option li {
				width: 25%;
				font-size: 1.4rem;
				color: #333;
				text-align: center;
				padding-bottom: 1.5rem;
			}
			
			li.more {
				color: #e61874;
			}
			
			.keylist {
				width: 100%;
				position: absolute;
				background: #FFFFFF;
				border-bottom: 1px solid #CCCCCC;
			}
			
			.keylist li {
				padding: 1.2rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input id="search" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="酒店名、地名">

				</div>
			</div>
		</header>
		<div class="mui-content">
			<ul class="keylist" id="keylist">

			</ul>
			<div class="category">
				<h5 class="head">
					<img width="20" src="../styles/images/keyword/icon_hotsearch_nor.png@2x.png"/>
					<span>热搜</span>
				</h5>
				<ul class="option">
					<li>福田</li>
					<li>大学</li>
					<li>维也纳酒店</li>
					<li>机场</li>
					<li>海岸城</li>
					<li>公寓</li>
					<li>深圳北</li>
					<li>华强北</li>
				</ul>
			</div>
			<div class="category">
				<h5 class="head">
					<img width="19" src="../styles/images/keyword/icon_features_nor.png@2x.png"/>
					<span>特色</span>
				</h5>
				<ul class="option">
					<li>乐活彭城</li>
					<li>休闲度假</li>
					<li>亲自时刻</li>
					<li>浪漫情侣</li>
					<li>商务出行</li>
					<li>公寓</li>
					<li>客栈</li>
					<li>复式LOFT</li>
				</ul>
			</div>
			<div class="category">
				<h5 class="head">
					<img width="20" src="../styles/images/keyword/icon_brand_nor.png@2x.png"/>
					<span>品牌</span>
				</h5>
				<ul class="option">
					<li>七天</li>
					<li>锦江之星</li>
					<li>首旅如家</li>
					<li>华住</li>
					<li>莫泰</li>
					<li>速8</li>
					<li>洲际(IHG)</li>
					<!--<li class="more">更多...</li>-->
				</ul>
			</div>
			<div class="category">
				<h5 class="head">
					<img width="16.5" src="../styles/images/keyword/icon_subwaystation_nor.png@2x.png"/>
					<span>地铁站</span>
				</h5>
				<ul class="option">
					<li>世界之窗</li>
					<li>罗湖</li>
					<li>南山</li>
					<li>老街</li>
					<li>国贸</li>
					<li>会展中心</li>
					<li>桃园</li>
					<!--<li class="more">更多...</li>-->
				</ul>
			</div>
			<div class="category">
				<h5 class="head">
					<img width="18.5" src="../styles/images/keyword/icon_businessdistrict_nor.png@2x.png"/>
					<span>商业区</span>
				</h5>
				<ul class="option">
					<li>会展中心</li>
					<li>罗湖口岸</li>
					<li>福田口岸</li>
					<li>科技园</li>
					<li>福永</li>
					<li>宝安中心</li>
					<li>万象城</li>
					<li>东门</li>
				</ul>
			</div>
			<div class="category">
				<h5 class="head">
					<img width="20" src="../styles/images/keyword/icon_administrativearea_nor.png@2x.png"/>
					<span>行政区</span>
				</h5>
				<ul class="option">
					<li>福田区</li>
					<li>盐田区</li>
					<li>龙岗区</li>
					<li>南山区</li>
					<li>宝安区</li>
					<li>罗湖区</li>
				</ul>
			</div>
			<div class="category">
				<h5 class="head">
					<img width="20" src="../styles/images/keyword/icon_airport_nor.png@2x.png"/>
					<span>机场车站</span>
				</h5>
				<ul class="option">
					<li>宝安国际机场</li>
					<li>深圳北站</li>
					<li>深圳火车站</li>
					<li>深圳东站</li>
					<li>深圳西站</li>
					<li>深圳坪山站</li>
					<li>福田高铁站</li>
				</ul>
			</div>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<!--<script src="../js/myStorage.js"></script>-->
		<script type="text/javascript">
			mui.init({
				preloadPages: [{
					id: 'index.html',
					url: 'index.html'
				}]
			});
			var keylist = document.getElementById("keylist");
			var search = document.getElementById("search");

			search.addEventListener('input', function(e) {
				console.log(search.value);

				if(search.value) {
					keylist.style.display = "block";
					keylist.innerHTML = "<li>" + search.value + "</li>";
					taplist('.keylist');
				} else {
					keylist.style.display = "none";
				}
			})

			var indexPage = null;
			//添加列表项的点击事件
			function taplist(temp) {
				mui(temp).on('tap', 'li', function(e) {
					var keyword = this.innerHTML;
//					console.log(keyword);
					localStorage.setItem('keyword', keyword);
					//获得详情页面
					if(!indexPage) {
						indexPage = plus.webview.getWebviewById('index.html');
					}
					//触发详情页面的newsId事件
					mui.fire(indexPage, 'keyword', {
						keyword: keyword
					});
					//打开详情页面         

					mui.openWindow({
						id: 'index.html'
					});
					keylist.style.display = "none";
					search.value = "";
				});
			}
			mui.plusReady(function() {
				taplist('body');
				keylist.style.display = "none";

			})
		</script>
	</body>

</html>